<template>
  <div class="edit_views">
    <nav-bar style="margin-bottom: 4.167vw"></nav-bar>
    <div class="upload_group">
      <van-uploader
        :after-read="afterRead"
        class="upload"
        preview-size="100vw"
      />
      <edit-banner-bar label="头像">
        <img
          :src="userModel.user_img"
          slot="value"
          alt=""
          v-if="userModel.user_img"
          style="border-radius: 5.556vw"
        />
        <img
          src="@/assets/default_img.jpg"
          slot="value"
          alt=""
          style="border-radius: 5.556vw"
          v-else
        />
      </edit-banner-bar>
    </div>

    <edit-banner-bar label="昵称" @click.native="show = true">
      <a slot="value">{{ userModel.username }}</a>
    </edit-banner-bar>
    <edit-banner-bar label="UID">
      <a slot="value">{{ userModel.id }}</a>
    </edit-banner-bar>
    <edit-banner-bar label="性别" @click.native="sexShow = true">
      <a slot="value">{{ userModel.gender == 1 ? "男" : "女" }}</a>
    </edit-banner-bar>
    <edit-banner-bar label="出生日期"></edit-banner-bar>
    <edit-banner-bar label="个性签名" @click.native="textShow = true">
      <span slot="value">{{ userModel.user_desc }}</span>
    </edit-banner-bar>
    <div class="edit_back" @click="$router.push('/userinfo')">
      返回个人中心页
    </div>
    <div class="login_out" @click="loginOut">退出登录</div>
    <!-- 弹出框 -->
    <van-dialog
      v-model="show"
      title="昵称"
      show-cancel-button
      @confirm="clickConfirm"
      @cancel="clear"
    >
      <van-cell-group>
        <van-field v-model="content" label="" placeholder="请输入昵称" focus />
      </van-cell-group>
    </van-dialog>

    <van-dialog
      v-model="textShow"
      title="个性签名"
      show-cancel-button
      @confirm="clickTextareaConfirm"
      @cancel="clear"
    >
      <van-cell-group>
        <van-field
          v-model="content"
          type="textarea"
          label=""
          placeholder="请输入个性签名"
          focus
        />
      </van-cell-group>
    </van-dialog>

    <van-action-sheet
      v-model="sexShow"
      :actions="actions"
      cancel-text="取消"
      close-on-click-action
      @select="onSelect"
      @cancel="clear"
    />
  </div>
</template>

<script>
import NavBar from "@/components/common/NavBar";
import EditBannerBar from "../components/common/EditBannerBar.vue";
import { getInfo, uploadImg, updateUsers } from "@/utils/Api.js";
export default {
  data() {
    return {
      userModel: {},
      show: false,
      textShow: false,
      sexShow: false,
      content: "",
      actions: [
        { name: "男", val: 1 },
        { name: "女", val: 0 },
      ],
    };
  },
  components: {
    NavBar,
    EditBannerBar,
  },
  methods: {
    async selectUser() {
      let user = await getInfo(
        "/user/" + JSON.parse(localStorage.getItem("id"))
      );
      this.userModel = user.data[0];
    },
    async afterRead(file) {
      // 此时可以自行将文件上传至服务器  ,只是上传，没有修改数据库的值
      //   上传图片格式必须是formdata
      const formdata = new FormData();
      formdata.append("file", file.file);
      const res = await uploadImg("/upload", formdata);
      //   console.log(res);
      this.userModel.user_img = res.data.url;

      //   修改数据库的值
      this.updateUser();
      this.$toast.success("头像修改成功");
    },

    async updateUser() {
      const res = await updateUsers(
        "/update/" + JSON.parse(localStorage.getItem("id")),
        this.userModel
      );
      console.log("修改数据库", res);
    },
    clickConfirm() {
      console.log("confirm");
      this.userModel.username = this.content;
      this.content = "";
      this.updateUser();
    },
    clickTextareaConfirm() {
      this.userModel.user_desc = this.content;
      console.log("textconfirm");
      this.content = "";
      this.updateUser();
    },
    clear() {
      this.content = "";
    },
    onSelect(item) {
      // 默认情况下点击选项时不会自动收起
      // 可以通过 close-on-click-action 属性开启自动收起
      this.show = false;
      console.log(item);
      this.userModel.gender = item.val;
      this.updateUser();
    },
    loginOut() {
      localStorage.removeItem("id");
      localStorage.removeItem("token");
      this.$router.push("/login");
    },
  },
  created() {
    this.selectUser();
  },
};
</script>

<style lang="less" scoped>
.edit_views {
  .upload_group {
    position: relative;
    overflow: hidden;
    .upload {
      position: absolute;
      opacity: 0;
    }
  }
  img {
    width: 12.778vw;
    height: 12.778vw;
  }
  .edit_back,
  .login_out {
    width: 100%;
    background: white;
    padding: 4.167vw;
    border-bottom: 0.278vw solid #f4f4f4;
    color: #ff9db5;
    font-size: 3.889vw;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  .edit_back {
    margin-top: 4.167vw;
  }
}
</style>